<template>
  <div class="el-container">
    <div class="el-main">
      <el-col class="bg-white">
        <el-col class="standard-bottom">
          <el-col :span="24">
            <el-button
              icon="iconfont iconxianxing_tianjia"
              type="primary"
              @click="handleAdd"
            >
              新增
            </el-button>
            <el-button
              icon="iconfont iconxianxing_tongbu"
              type="primary"
              @click="handleSync"
            >
              同步
            </el-button>
          </el-col>
        </el-col>
        <el-col class="top-standard">
          <Table
            ref="table"
            :current-page="page"
            :header-data="tableHeader"
            :loading="loading"
            :page-size="limit"
            :table-data="tableData"
            :total="total"
            style="width: 100%"
            @now-page="handlePage"
            @now-size="handleSize"
            @table-sort="handleSort"
          />
        </el-col>
      </el-col>
    </div>
  </div>
</template>

<script>
import handleTable from "@/mixins/table.js";
import Table from "@/components/Table/index.js";

export default {
  name: "Addtable",
  components: { Table },
  mixins: [handleTable],
  data() {
    return {
      searchForm: {},
      sourceForm: {},
      haveSearch: true,
      tableHeader: [],
      addUrl: "",
      updateUrl: "",
      delUrl: "",
      url: "",
      checkUrl: "",
      syncUrl: "",
      subRouterPath: ""
    };
  },
  created() {
    this.tableHeader = [
      {
        prop: "codeType",
        label: "代码类别",
        sortable: true,
        overflow: true,
        minWidth: "120",
        align: "left"
      },
      {
        prop: "typeName",
        label: "类别名称",
        sortable: true,
        minWidth: "120",
        overflow: true,
        align: "left"
      },
      {
        prop: "codeValue",
        label: "参数值",
        sortable: true,
        overflow: true,
        minWidth: "87",
        align: "left"
      },
      {
        prop: "codeName",
        label: "参数名称",
        sortable: true,
        minWidth: "120",
        overflow: true,
        align: "left"
      },
      {
        prop: "orderNo",
        label: "排序号",
        sortable: true,
        width: "90",
        align: "left"
      },
      {
        prop: "maintainFlag",
        label: "维护标志",
        sortable: true,
        width: "104",
        align: "left",
        formatter: (row, column, cellValue) =>
            cellValue ? "可维护" : "不可维护"
      },
      {
        prop: "remark",
        label: "备注",
        sortable: true,
        minWidth: "160",
        overflow: true,
        align: "left"
      },
      {
        width: 120,
        label: "操作",
        align: "left",
        fixed: "right",
        buttonList: (row, index) => {
          return [
            {
              text: "编辑",
              type: "text",
              event: this.handleEdit
            },
            {
              text: "删除",
              type: "text",
              event: this.handleDelete
            }
          ];
        }
      }
    ];
    // this.getTableData()
  },
  methods: {
    // 查询事件
    handleSearch() {
      this.page = 1;
      this.$refs.table.$children[0].clearSort();
      this.sortParams = {};
      this.getTableData();
    },
    // 查询事件
    handleReset() {
      this.searchForm = {};
      this.page = 1;
      this.limit = 10;
      this.getTableData();
    },
    /**
     * 获取列表请求
     */
    getTableData() {
      this.loading = true;
      this.getTableParams();
      this.getData(this.tableParams)
          .then(res => {
            if (!res) return;
            const { data, pageInfo } = res
            setTimeout(() => {
              this.loading = false
              this.tableData = data
              this.total = pageInfo.total
            }, 500)
          })
          .catch(err => {
            console.log("TCL: getTableData -> err", err);
          });
    },
    // 新增数据源
    handleAdd() {
      this.$router.push({
        name: this.subRouterPath,
        query: {}
      });
    },
    handleEdit(row) {
      this.$router.push({
        name: this.subRouterPath,
        query: {
          [this.idKey]: row[this.idKey]
        }
      });
    },
    // 删除数据源
    handleDelete(row) {
      this.$confirm("您确认要删除该数据源么？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        cancelButtonClass: "btn-custom-cancel"
      }).then(() => {
        this.deleteData({ [this.idKey]: row[this.idKey] }).then(
            ({ success, message }) => {
              this.$message({
                type: success ? "success" : "error",
                message: message
              });
              if (success) {
                this.getTableData();
              }
            }
        );
      });
    },
    handleSync() {
      this.syncData()
          .then(({ success, message }) => {
            this.$message({
              type: success ? "success" : "error",
              message: message
            });
          })
          .catch(error => {
            console.log(error);
          });
    }
  }
};
</script>

<style lang="scss"></style>
